﻿<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
	<link rel="icon" type="image/png" href="../assets/img/favicon.png">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title>Get Shit Done Bootstrap Wizard by Creative Tim</title>

	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
    <meta name="viewport" content="width=device-width" />

	<!--     Fonts and icons     -->
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet">

	<!-- CSS Files -->
    <link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
	<link href="../assets/css/gsdk-bootstrap-wizard.css" rel="stylesheet" />

	<!-- CSS Just for demo purpose, don't include it in your project -->
	<link href="../assets/css/demo.css" rel="stylesheet" />

<script type="text/javascript" src="../jquery/jquery.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$("#finish").click(function() {
			 $("#reg_form").submit();  
			 /* alert("reg.action");  */
		});
	});
</script>


</head>
<body>
<div class="image-container set-full-height" style="background-image: url('../assets/img/wizard-boat.jpg')">
    <!--   Creative Tim Branding   -->
    <a href="#">
         <div class="logo-container">
            <div class="logo">
                <img src="../assets/img/new_logo.png">
            </div>
            <div class="brand">
                Creative Tim
            </div>
        </div>
    </a>

    <!--   Big container   -->
    <div class="container">
        <div class="row">
        <div class="col-sm-8 col-sm-offset-2">

            <!--      Wizard container        -->
            <div class="wizard-container">
                <div class="card wizard-card" data-color="azzure" id="wizard">
                    <form  id="reg_form" action="reg.action" method="post">
                <!--        You can switch ' data-color="azzure" '  with one of the next bright colors: "blue", "green", "orange", "red"          -->

                    	<div class="wizard-header">
                        	<h3>
                        	   <b>借书系统</b><br>
                        	   <small>Welcome!</small>
                        	</h3>
                    	</div>
						<div class="wizard-navigation">
							<ul>
	                            <li><a href="#details" data-toggle="tab">注册</a></li>
	                        </ul>
						</div>
                        <div class="tab-content">
                            <div class="tab-pane" id="details">
                              <div class="row">
                                  <div class="col-sm-12">
                                    <h4 class="info-text"> 填写您的基本信息</h4>
                                  </div>
                                  <div class="col-sm-5 col-sm-offset-1">
                                      <div class="form-group">
                                        <label>身份证号</label>
                                        <input type="text" class="form-control" name="id" id="exampleInputEmail1" placeholder="...">
                                      </div>
                                  </div>
                                  <div class="col-sm-5">
                                      <div class="form-group">
                                        <label>姓名</label>
                                        <input type="text" class="form-control" name="name" id="exampleInputEmail2" placeholder="...">
                                      </div>
                                  </div>
                                  <div class="col-sm-5 col-sm-offset-1">
                                      <div class="form-group">
                                          <label>登录密码</label>
                                          <input type="text" class="form-control" name="password" id="exampleInputEmail3" placeholder="...">
                                         
                                          <label>确认密码</label>
                                          <input type="text" class="form-control" id="exampleInputEmail4" placeholder="...">
                                         
                                      </div>
                                  </div>
                                  <div class="col-sm-5">
                                      <div class="form-group">
                                          <label>电话号码</label>
                                              <input type="text" name="phonenumber" class="form-control" placeholder="...">
                                      </div>
                                  </div>
                              </div>
                            </div>
                            
                          
                            
                           
                        <div class="wizard-footer">
                            	<div class="pull-right">
                                    <input type='button' class='btn btn-finish btn-fill btn-info btn-wd btn-sm' name='finish' id='finish'  value='注册' />
                                    <input type='button' class='btn btn-finish btn-fill btn-info btn-wd btn-sm' name='back' id='back'  value='返回' />
                                </div>
                                <div class="pull-left">
                                    <input type='button' class='btn btn-previous btn-fill btn-default btn-wd btn-sm' name='previous' value='Previous' />
                                </div>
                                <div class="clearfix"></div>
                        </div>
                        
                          
                            <script >
								function get(e) {
									return document.getElementById(e);
								}
								    get('back').onclick=function(){
									window.location.href= '/jsxt/user/tologin.action';
								}
									get('exampleInputEmail4').onblur = function() {
										var npassword = get('exampleInputEmail3').value;
										var fpassword = get('exampleInputEmail4').value;
										if (npassword != fpassword) {
											alert('两个密码不匹配');
										}
									}
									get('exampleInputEmail3').onblur = function() {
										var npassword = get('exampleInputEmail3').value.length;
										if (npassword<6&&npassword>0) {
											alert('密码长度过短');
										}
									}
									
									get('exampleInputEmail1').onblur = function(){
										var nid = get('exampleInputEmail1').value.length;
										if(nid!=18)
											alert('身份证格式不正确！必须为18位');
									}
							</script>
                        
                        
                        
                    </form>
                </div>
            </div> <!-- wizard container -->
        </div>
        </div> <!-- row -->
    </div> <!--  big container -->

    <div class="footer">
        <div class="container">
             made with <i class="fa fa-heart heart"></i> by <a href="#">Group 12</a>
        </div>
    </div>


</div>

</body>

	<!--   Core JS Files   -->
	<script src="../assets/js/jquery-2.2.4.min.js" type="text/javascript"></script>
	<script src="../assets/js/bootstrap.min.js" type="text/javascript"></script>
	<script src="../assets/js/jquery.bootstrap.wizard.js" type="text/javascript"></script>

	<!--  Plugin for the Wizard -->
	<script src="../assets/js/gsdk-bootstrap-wizard.js"></script>

	<!--  More information about jquery.validate here: http://jqueryvalidation.org/	 -->
	<script src="../assets/js/jquery.validate.min.js"></script>

</html>
